<template>
  <div class="home-container">
    <div class="header">

      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white" lazy-render>
        <van-swipe-item v-for="image in data.images" :key="image">
          <img :src="image" />
        </van-swipe-item>
      </van-swipe>
      <div class="notice-bar" v-if="data.noticeBar.length">
        <!-- <img src="../../assets/home/notice_icon.f1ac9c9a.png" class="notice-bar-icon" /> -->
        <!-- <van-icon name="bullhorn-o" size="14px" /> -->
        <van-icon name="fire" color="#ee0a24" size="0.52rem" />
        <div class="notice-bar-divider"></div>
        <van-notice-bar mode="link" color="rgba(0,0,0,0.9)" background="white" class="notice-bar-box" :scrollable="false">
          <van-swipe vertical class="notice-swipe" :autoplay="3000" :touchable="false" :show-indicators="false">
            <van-swipe-item v-for="item in data.noticeBar" :key="item.idx" @click="goNoticeHandler(item)">
              {{ item.title }}
            </van-swipe-item>
          </van-swipe>
        </van-notice-bar>
      </div>
    </div>

    <van-pull-refresh v-model="data.refreshing" @refresh="onRefresh">
      <div class="contain">
        <van-card v-for="item in data.productItems" :key="item.id" :price="item.price" :desc="item.productDesc"
          :title="item.name" :thumb="item.icon || 'https://img01.yzcdn.cn/vant/ipad.jpeg'">
          <!-- <template #num>
    <van-tag plain type="danger">标签</van-tag>
    <van-tag plain type="danger">标签</van-tag>
  </template> -->
          <template #num>
            <van-button class="product-btn" size="small" @click="goProductHandler(item)">购买</van-button>
          </template>
        </van-card>
      </div>
    </van-pull-refresh>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { listNotice, productList, realInfo } from '@/config/api'
import { useRouter } from 'vue-router'
const router = useRouter()

const data = ref({
  loading: false,
  finished: false,
  refreshing: false,
  noticeBar: [
    { content: '明月直入，无心可猜。', idx: 0 },
    { content: '米袋虽空——樱花开哉！', idx: 1 },
    { content: '仙人抚我顶，结发受长生。', idx: 2 },
    { content: '今人不见古时月，今月曾经照古人。', idx: 3 }
  ],
  productItems: [],
  showPopup: false,
  images: [
    require('../../assets/sw2.png'),
    require('../../assets/sw1.png'),
    require('../../assets/sw3.png'),
    require('../../assets/sw4.png')
  ]
})

onMounted(() => {
  loadNotice()
  loadProduct()
})

const loadProduct = () => {
  productList({}).then((res) => {
    data.value.productItems = res

    data.value.loading = false
    data.value.refreshing = false
  })
}

const loadNotice = () => {
  listNotice({type:'cn'}).then((res) => {
    data.value.noticeBar = res.records
  })
}

const goProductHandler = (query) => {
  realInfo({}).then((res) => {
    if (res) {
      router.push({ path: '/mallOrderDetail', query })
    } else {
      router.push("/addReal")
    }
  })

};


const goNoticeHandler = (query) => {
  router.push({ path: '/noticeList', query: { id: query.id } })
};

const onRefresh = () => {
  // 清空列表数据
  data.value.finished = false
  data.value.refreshing = true
  // 重新加载数据
  // 将 loading 设置为 true，表示处于加载状态
  data.value.loading = true
  // 重新加载数据
  // 将 loading 设置为 true，表示处于加载状态
  loadProduct()
}
</script>

<style lang="less" scoped>
/deep/ .van-image {
  min-height: 88px;
  min-width: 88px;
}

/deep/.van-card .van-card__content {
  margin-left: 70px;
}

/deep/.van-card__title {
  margin-bottom: 10px;
}

/deep/.van-image {
  margin-left: 35px;
}

.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 0.27;
  height: 5.2rem;
  text-align: center;

  img {
    width: 100%;
    height: 100%;
  }

  //   background-color: #39a9ed;
}

.home-container {

  //   .header {
  //     padding: var(--van-padding-md) var(--van-padding-md);
  //     box-sizing: border-box;
  //   }
  .notice-bar {
    background-color: white;
    display: flex;
    align-items: center;
    border-radius: var(--border-radius--10);
    overflow: hidden;
    padding-left: var(--van-padding-md);

    &-divider {
      width: 0.02rem;
      height: 0.53rem;
      margin-left: var(--van-padding-md);
      background-color: rgba(229, 229, 229, 0.6);
    }

    &-icon {
      width: 1.6rem;
      height: 0.53rem;
      margin-left: var(--van-padding-md);
      display: flex;
    }

    &-box {
      border-radius: var(--border-radius--10);
      overflow: hidden;
      flex: 1;
      padding: 0 var(--van-padding-md);
    }

    .notice-swipe {
      height: 40px;
      line-height: 40px;
    }
  }

  .contain {

    // padding: var(--van-padding-md);
    // background-color: rgb(55, 42, 42);
    .van-card {
      background: #fff;
    }
  }
}

.product-btn {
  width: 1.73rem;
  height: 0.67rem;
  border-radius: 0.33rem;
}

.popup-box {
  padding: 0.69rem 0.51rem 0.65rem;
}
</style>
